import { AntdModalProps } from "@/hooks/useAntdModal"
import { PlusOutlined, UploadOutlined } from "@ant-design/icons"
import { Button, Form, Input, message, Modal, Select, Upload, UploadProps } from "antd"
import { RcFile, UploadFile } from "antd/lib/upload";
import { useState } from "react";

const SaveResourceModal = ({form, modalProps}:AntdModalProps)=>{
    const [fileList, setFileList] = useState<UploadFile[]>([]);
    const [uploading, setUploading] = useState(false);
    const action = !location.host.includes('all-round') ? 'http://localhost:3000/api/deliver/resource/upload' : 'https://all-round.weillan.com/api/deliver/resource/upload'

  
    const props: UploadProps = {
        maxCount:1,
        listType:'picture-card',
        onRemove: (file) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        },
        beforeUpload: (file) => {
          setFileList([...fileList, file]);
    
          return false;
        },
        fileList,
      };
      const onOk = async ()=>{
        const data =await form.validateFields()
        const formData = new FormData();
        formData.append('file',fileList[0] as RcFile)
        Object.keys(data).forEach(key=>{
            formData.append(key,data[key])
        })
        // fileList.forEach((file) => {
        //   formData.append('files[]', file as RcFile);
        // });
        setUploading(true);
        // You can use any AJAX library you like
        fetch(action, {
          method: 'POST',
          body: formData,
        })
          .then((res) => res.json())
          .then(() => {
            setFileList([]);
            message.success('upload successfully.');
          })
          .catch(() => {
            message.error('upload failed.');
          })
          .finally(() => {
            setUploading(false);
          });
      }
    return <Modal {...modalProps} onOk={onOk}>
        <Form form={form}>
            <Form.Item label='文件' name='aa' rules={[{
                required:true,
                message:'文件'
            }]}>
             <Upload {...props}>
             <div>
       <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
             </Upload>
            </Form.Item>
            <Form.Item label='标题' name='title' rules={[{
                required:true,
                message:'标题'
            }]}>
                <Input/>
            </Form.Item>
            <Form.Item label='类型' name='type'  rules={[{
                required:true,
                message:'类型'
            }]}>
                <Select options={[{value:'image',label:'图片'},{value:'template',label:'模版'},{value:'agreement',label:'协议'}]}/>
            </Form.Item>
            <Form.Item label='备注' name='remark'  rules={[{
                required:true,
                message:'备注'
            }]}>
                <Input.TextArea rows={3}/>
            </Form.Item>
        </Form>
    </Modal>
}
export default SaveResourceModal